<template>
  <div class="yl-clearfix">
    <el-row class="searchgrid">
      <el-col :span="8" v-if="isUserAgentAdmin">
        <select class="yl-select-option" v-model="filters.agent_id" @change="fetchClientList" v-if="isUserAgentAdmin">
          <option :value="null">--请选择代理商--</option>
          <option v-for="item in agentOptions" :key="item.id" :value="item.id" v-text="'『'+item.agent_level+'级』'+item.agent_name"></option>
        </select>

      </el-col>
      <el-col :span="8" :offset="isUserAgentAdmin? 0 : 8" style="text-align: center">
          <span v-if="todayCount">
            今日新增会员数量{{todayCount}}人
          </span>
        <span>
            会员人数{{pagination.total}}人
          </span>
      </el-col>
      <el-col :span="8">
        <div class="yl-float-right">
          <input class="yl-input-text" v-model="filters.keyword" type="text" placeholder="客户姓名/客户昵称/客户手机号">
          <input class="yl-input-button" value=" 查询 " type="button" @click="fetchClientList">
        </div>
      </el-col>
    </el-row>
    <!--列表-->
    <el-table :data="pagination.data"
              v-loading="loading"
              style="width: 100%;">
      <el-table-column type="id" prop="id" label="ID">
      </el-table-column>
      <el-table-column prop="real_name" label="真实姓名">
      </el-table-column>
      <el-table-column prop="cellphone" label="手机">
      </el-table-column>
      <el-table-column prop="nick_name" label="昵称">
      </el-table-column>
      <el-table-column prop="created_time" label="注册时间" min-width="120">
      </el-table-column>
      <el-table-column prop="reg_ip" label="注册IP">
      </el-table-column>
      <el-table-column prop="relation.direct_cust_id" label="推荐人ID">
      </el-table-column>
      <el-table-column prop="relation.direct_agent_id" label="代理ID">
      </el-table-column>
      <el-table-column prop="relation.direct_emp_id" label="员工ID">
      </el-table-column>

      <el-table-column label="操作" width="150" v-if="isUserSystemAdmin">
        <template scope="scope">
          <el-button v-if="scope.row.id !=1" size="mini" @click="segueToCleintEdit(scope.row)" icon="edit" title="代理修改"></el-button>
          <el-button v-if="scope.row.id !=1" size="mini" @click="segueToCleintSwap(scope.row)" title="修改客户归属关系"><i class="fa fa-exchange"></i></el-button>
          <el-button v-if="scope.row.id !=1" size="mini" @click="segueToCleintAccountAdjust(scope.row)" title="账户调整"><i class="fa fa-btc"></i></el-button>
          <el-button size="mini" @click="handlePlayClient(scope.row)" title="扮演用户,请在浏览器里面始终容许显示弹出窗口"><i class="fa fa-play-circle"></i></el-button>
        </template>
      </el-table-column>
    </el-table>


    <div class="yl-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="pagination.current_page"
        :page-sizes="[15, 30, 45, 60]"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="parseInt(pagination.per_page)"
        :total="pagination.total"
        style="float:right;">
      </el-pagination>
    </div>


  </div>


</template>

<script>
  import {clientList, issueClientToken} from '../../api/client';

  export default {
    data() {
      return {
        todayCount: 0,
        agentOptions: [],
        filters: {
          range: '',
          keyword: '',
          page: 1,
          size: 15,
          agent_id: null
        },
        playLoginUrl: '',
        selectedRow: {},
        pageIndex: 1,
        pagination: {},
        loading: false,
      }
    },

    methods: {

      handleSizeChange(size) {
        this.filters.size = size;
        this.filters.page = 1;
        this.fetchClientList();
      },
      handlePageChange(clickPageIndex) {
        //分页页面发生改变
        this.filters.page = clickPageIndex;
        this.fetchClientList();
      },
      //获取用户列表
      fetchClientList() {
        let params = this.filters;
        this.loading = true;
        clientList({params}).then((res) => {
          this.pagination = res.data.list;
          this.todayCount = res.data.todayCount;
          this.loading = false;
        }).catch(error => {
          this.loading = false;
          this.ezNotifyAxiosCatch(error)
        });
      },
      segueToCleintSwap: function (row) {
        let id = row.id;
        this.$router.push({name: '客户变更归属', params: {id}})
      },

      segueToCleintAccountAdjust: function (row) {
        let id = row.id;
        //客户变更归属
        this.$router.push({name: '调整客户余额', params: {id}})
      },

      segueToCleintEdit(row) {
        let id = row.id;
        this.$router.push({name: '客户修改', params: {id}})
      },
      handlePlayClient: function (row) {

        issueClientToken({client_id: row.id}).then(res => {
          if (res.status === 1) {
            let token = res.data.access_token;
            this.playLoginUrl = 'http://www-gubao.591wmj.com/login?access_token=' + token;
          } else {
            this.ezNotifyAxiosThen(res);
          }
        }).catch(error => this.ezNotifyAxiosCatch(error));
      },
    },
    mounted() {
      this.fetchClientList();
    },
    watch: {
      playLoginUrl(newRoute, oldRoute) {
        window.open(
          newRoute,
          '_blank'
        );
      },
    },
  }
</script>

